import React, { Component } from 'react';
import BScroll from "better-scroll"; //引入滚动


import axios from "axios"; //引入axios
import Header from './component/Header';
import Main from './component/Main';
import Footer from './component/Footer';


export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       tabList:[],
       active: 0,
    }
  }

  componentDidMount() {
    axios.get("/api/tabList").then( res => {
      this.setState({
        tabList:res.data,
      },() => {
        this.bs = new BScroll(".main")
      })
    })
  }

 

  change = (index) => {
    console.log("这个数父亲函数，儿子用来调用",index);
    this.setState({
      active: index
    })
  }

  render() {
    // 解构
    const { tabList, active } = this.state;
    return (
      <div className='App'>
        <Header tabList={tabList} active={active} change={this.change}></Header>
        <Main list={tabList[active]?tabList[active].children : []}></Main>
        <Footer tabList={tabList} active={active}></Footer>
      </div>
    )
  }
}

export default App
